/**
 * 点击波纹效果
 *
 * @param e - 鼠标事件对象
 * @param argOpts - 配置选项
 * @returns 布尔值，表示是否阻止默认行为
 */
export default function effectRipple(e: MouseEvent, argOpts?: {
    ele?: HTMLElement;
    type?: 'hit' | 'center';
    bgc?: string
}): boolean {
    const defaultOpts = {
        ele: e.target as HTMLElement, // 波纹作用元素
        type: 'hit', // hit点击位置扩散center中心点扩展
        bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
    };
    const opts = {...defaultOpts, ...argOpts};

    const target = opts.ele;
    if (target) {
        const rect = target.getBoundingClientRect();
        let ripple = target.querySelector('.e-ripple') as HTMLElement | null;

        if (!ripple) {
            ripple = document.createElement('span');
            ripple.className = 'e-ripple';
            ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
            target.appendChild(ripple);
        } else {
            ripple.className = 'e-ripple';
        }

        switch (opts.type) {
            case 'center':
                ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
                ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
                break;
            default:
                ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop) + 'px';
                ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft) + 'px';
        }

        ripple.style.backgroundColor = opts.bgc;
        ripple.className = 'e-ripple z-active';

        return false;
    }

    return true;
}
